<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	
	xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:fmt="http://java.sun.com/jstl/fmt"
    xmlns:rich="http://richfaces.org/rich">
    
 




<body>
	<h:form id="form">
  
  
  </h:form>
<script>

jQuery(document).ready(function(){
	
	jQuery("#mdAddCompromisso\\:inptHoraInicio").mask("99:99");
	jQuery("#mdAddCompromisso\\:inptHoraFim").mask("99:99");

	
	
	 });

		JQuery(document).ready(function() {
		
			
		
		});

	function dados() {
		var $f = jQuery.noConflict(); 
		
		
		//alert("b:" + b);
	
		};


	function calendar(d){
		var $j = jQuery.noConflict(); 

		var a = d;

		  
	}


</script>

	    <style>
        .tooltipData {
            font-weight: bold;
        }
        
        .cellExisteCompromisso {
            font-weight: bold;
            background-color: #FFCCCC;
        }
	  
 
h2 {
  font: 40 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 1;
  padding: 1;
}
 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
li {
  font: 20 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}
 
li:last-child {
  border: none;
}
 
li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;
 
  
}

  .tooltip {
           
            border-width:3px;
            padding:10px;
        }
        .tooltip-text {
            width:250px;
            height:80px;
            cursor:arrow;
            border-width:2px;
            text-align:center;
            display: table-cell;
            vertical-align: middle; 
        }
        .tooltipData {
            font-weight: bold;
        }
 
/*li a:hover {
  font-size: 15px;
  background: #f6f6f6;
}*/
	
    </style>



<h:form id="formTest">

</h:form>
</body>	


	
		<h:form id="agendaForm"  style="width: 200px" styleClass="form">
		<div class="field-clear"></div>
		<a4j:region >
			<h:panelGroup id="pgCalendar" layout="block" style="width: 250px">
			 <a4j:jsFunction name="ajaxSubmit" reRender="panelCompromissoCorrente" />
				                  
		
			                  
		  <a4j:jsFunction id="obtemDiaCarCompr" name="obterDiaCarregarCompromisso" action="#{calendarDataModel.carregarCompromisso}" reRender="panelCompromissoCorrente" >
			 <a4j:actionparam name="param2" assignTo="#{calendarDataModel.diaSelecionado}"  />                 
		 </a4j:jsFunction>
		 
		 
		 <a4j:jsFunction id="nextDate" name="obterDataAlterada"  reRender="organizer,sample3" action="#{calendarDataModel.recarregarCalendario}"  >
		 </a4j:jsFunction>
			
				<rich:calendar id="organizer"
					 popup="false"
					value="#{agendaBean.selectedDate}"
					 showApplyButton="true"
					cellWidth="28px" 
					cellHeight="28px" 
					boundaryDatesMode="none"
					showWeeksBar="false"
					dataModel="#{calendarDataModel}"
					oncurrentdateselected="obterDataAlterada()"				
					firstWeekDay="0" 
					 locale="pt_Br"
					todayControlMode="hidden"
					minDaysInFirstWeek="2"
					ondateselect="obterDiaCarregarCompromisso(this.textContent);"
					reRender="panelCompromissoCorrente"
					onchanged="if (event.rich.date) {ajaxSubmit();}"
					valueChangeListener="#{calendarDataModel.valueChanged}" >
					
				 <a4j:outputPanel  layout="block" id="cell"  onclick="#{rich:component('organizer')}.resetSelectedDate()" style="height: 100%;" styleClass="organizer-cell">
	                <div>
	                     <h:outputText id="c"  value="{day}" style="align:center"/>
	                </div>
					<div>&#xA0;</div>
	                <div>
	                
							 <h:outputText value="{data.adicionar}" style="align:center"/>
	                    
	                </div>
	              
	            </a4j:outputPanel>
				</rich:calendar>
				<a4j:commandLink id="addCompromisso" style="text-transform: uppercase;"  action="#{calendarDataModel.carregarDados}"  >
					<h:graphicImage value="/resources/imagens/btn_adicionar.png" id="giAdd" styleClass="hidelink"/>
				</a4j:commandLink>
				</h:panelGroup>
					</a4j:region>
			
		         <h:panelGroup id="panelCompromissoCorrente">
	        		 <a4j:region>
	        		 <rich:dataList id="tbCompromisso" rendered="#{not empty calendarDataModel.listaCompromisso}" 
		        		 var="compromisso" value="#{calendarDataModel.listaCompromisso}" rows="2">
		        		 <ul>
					           	 <li>
					           	    <rich:panel >
						           	  	<h:commandLink id="editarCompromisso" style="text-transform: uppercase;" value="#{compromisso.titulo}" action="#{calendarDataModel.carregarDados}"  >
											<f:setPropertyActionListener target="#{calendarDataModel.agenda}" value="#{compromisso}"/> 
										</h:commandLink> 
										</rich:panel>
										 <rich:toolTip followMouse="true" direction="top-right"  styleClass="tooltip">
							            <span style="white-space:nowrap">
							               	#{compromisso.descricao}
							            </span>
						        </rich:toolTip>
									</li>
									
						       
					           <li> <h:outputLabel value="Início: " styleClass="labelCompromisso"/> 
					            <h:outputText value="#{compromisso.horaInicio} " />
					             <h:outputText value="Fim: " styleClass="labelCompromisso"></h:outputText> 
					            <h:outputText value="#{compromisso.horaFim} " /> </li>
					            </ul>
	    					  </rich:dataList>
	        		
							<div class="grid-8-12">
								<div  style="margin-left: 60px">
									<rich:datascroller align="center" renderIfSinglePage="false" for="tbCompromisso" />
								</div>
							</div>
						</a4j:region>
					</h:panelGroup>
			 
			
				
		</h:form>

</ui:composition>
